<template>
	<view class="myOrder_box">
		<view class="order_type dis_fx fx_column">
			<view :class="order_status==''?'cur':''" @click="updateStatus('')">全部</view>
			<view :class="order_status=='TP'?'cur':''" @click="updateStatus('TP')">待支付</view>
			<view :class="order_status=='TA'?'cur':''" @click="updateStatus('TA')">拼团中</view>
			<view :class="order_status=='TR'?'cur':''" @click="updateStatus('TR')">待出行</view>
			<view :class="order_status=='TC'?'cur':''" @click="updateStatus('TC')">待点评</view>
			<view :class="order_status=='TF'?'cur':''" @click="updateStatus('TF')">退款中</view>
		</view>
		<view class="order_item">
			<scroll-view scroll-y @scrolltolower="nextPage">
				<view class="item_box">
					<view class="item"  v-for="(item,index) in orderList" :key="index">
						<view class="state_box dis_fx fx_between" @click="toDetail(item.id)">
							<view class="num">订单号：{{item.orderNo}}</view>
							<text class="state" v-if="item.orderStatus=='TP'">待支付</text>
							<text class="state state2" v-if="item.orderStatus=='TA'">拼团中</text>
							<text class="state state3" v-if="item.orderStatus=='TR'">待出行</text>
							<text class="state state4" v-if="item.orderStatus=='TC'">待点评</text>
							<text class="state state5" v-if="item.orderStatus=='TWF'">退款审核中</text>
							<text class="state state5" v-if="item.orderStatus=='TF'">退款中</text>
							<text class="state state5" v-if="item.orderStatus=='FI'">已完成</text>
							<text class="state state5" v-if="item.orderStatus=='CA'">已取消</text>
						</view>
						<view class="info" @click="toDetail(item.id)">
							<view>{{item.product.productName}}</view>
							<view>出行日期：{{item.tripBeginDate}} ~ {{item.tripEndDate}}</view>
						</view>
						<view class="addit dis_fx fx_between fx_column" >
							<view class="addit_l">
								<view class="price">￥{{item.totalPayAmount}}元</view>
								<text>{{item.product.productTypeName}}</text>
							</view>
							<view class="addit_r" v-if="item.orderStatus=='TP'">
								<navigator url="" @click="cancleOrder(item.id)">取消</navigator>
								<navigator url="" class="cur" @click="prepay(item.id)">去付款</navigator>
							</view>
							<view class="addit_r" v-if="item.orderStatus=='TA' || item.orderStatus=='TR'">
								<navigator url="" @click="applyRefund(item.id)">申请退款</navigator>
								<navigator url="" class="cur" @click="directShare(index)">邀请好友</navigator>
							</view>
							<view class="addit_r" v-if="item.orderStatus=='TC'">
								<navigator @click="toNewPage('/pages/comment/comment?orderId='+item.id+'&orderNo='+item.orderNo+'&productName='+item.product.productName+'&productMasterDiagram='+item.product.productMasterDiagram)" class="cur">去点评</navigator>
							</view>
							<view class="addit_r" v-if="item.orderStatus=='TWF'">
								<navigator url="" class="cur" @click="cancleRefund(item.id)">取消退款</navigator>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	var jweixin = require('jweixin-module')
	import util from '../../../common/util.js'
	import wxShare from '../../../common/wxShare.js'
	export default {
		data() {
			return {
				order_status:'',
				orderList:[],
				page:1,
				rows:10,
				canNextPage:false
			}
		},
		onLoad(options){
			var order_status=options.status;
			if(order_status){
				this.order_status=order_status;
			}
		},
		onShow() {
			this.page=1;
			this.orderList=[]
			this.getOrders();
		},
		onPullDownRefresh() {
			this.page=1;
			this.orderList=[]
			this.getOrders();
			uni.stopPullDownRefresh();
		},
		methods: {
			//直接分享
			directShare(index) {
				var that = this;
				var param = {
					title: that.orderList[index].product.productName,
					imgUrl: that.orderList[index].product.productMasterDiagram.split(",")[0],
					desc: that.orderList[index].product.productSubtitle
				}
				wxShare.share(param, "");
				that.closeShare()
				uni.showModal({
					content: '请点击上方使用微信自带分享',
					showCancel: false
				});
			},
			//获取预支付信息
			prepay(orderId){
				var that=this
				var params={orderId:orderId}
				util.fetchGet('/api/wxJsApiPay',params,function(res){
					//console.log(res)
					if(res.data){
						if (typeof WeixinJSBridge == "undefined"){
						   if( document.addEventListener ){
							   document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
						   }else if (document.attachEvent){
							   document.attachEvent('WeixinJSBridgeReady', onBridgeReady); 
							   document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
						   }
						}else{
						   that.onBridgeReady(res);
						}
					}
				},function(){},true)
			},
			onBridgeReady(res){
			   WeixinJSBridge.invoke('getBrandWCPayRequest', {
				"appId" : res.data.appId, //公众号名称,由商户传入     
				"timeStamp" : res.data.timeStamp, //时间戳,自1970年以来的秒数     
				"nonceStr" : res.data.nonceStr, //随机串     
				"package" : res.data.package,
				"signType" : res.data.signType, //微信签名方式：     
				"paySign" : res.data.paySign
			//微信签名 
			}, function(res) {
				if (res.err_msg == "get_brand_wcpay_request:ok") {
					uni.showModal({
						content: '支付成功',
						showCancel: false
					});	
					uni.navigateTo({url: '/pages/order/myOrder/myOrder'})
					//支付成功后跳转的页面
				} else if (res.err_msg == "get_brand_wcpay_request:cancel") {
					console.log('支付取消');
				} else if (res.err_msg == "get_brand_wcpay_request:fail") {
					console.log('支付失败');
					WeixinJSBridge.call('closeWindow');
				} //使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok,但并不保证它绝对可靠。
			});
			},
			nextPage(){
				if(this.canNextPage){
					var page=this.page;
					this.page=page+1;
					this.getOrders()
				}
				
			},
			//取消申请退款
			cancleRefund(id){
				var that = this;
				uni.showModal({
					title: '提示',
					content: '是否取消退款?',
					success: function (res) {
						if (res.confirm) {
							uni.showLoading({
								mask:true,
								title: '加载中'
							});
							util.fetchGet('/order/cancel_refund/'+id,{},function(res){
								uni.showToast({
									title: '取消成功',
									icon:'success'
								});
								that.page=1;
								that.orderList=[]
								uni.hideLoading();
								that.getOrders()
							},function(){},false)
						} 
					}
				});
			},
			//申请退款
			applyRefund(id){
				var that = this;
				uni.showModal({
					title: '提示',
					content: '是否退款?',
					success: function (res) {
						if (res.confirm) {
							uni.showLoading({
								mask:true,
								title: '加载中'
							});
							util.fetchGet('/order/apply_refund/'+id,{},function(res){
								uni.showToast({
									title: '已申请退款，请等待客服联系',
									icon:'none'
								});
								that.page=1;
								that.orderList=[]
								uni.hideLoading();
								that.getOrders()
							},function(){},false)
						} 
					}
				});
			},
			//取消订单
			cancleOrder(id){
				var that=this;
				uni.showModal({
					title: '提示',
					content: '是否取消订单?',
					success: function (res) {
						if (res.confirm) {
							uni.showLoading({
								mask:true,
								title: '加载中'
							});
							util.fetchGet('/order/cancel_order/'+id,{},function(res){
								uni.showToast({
									title: '取消成功',
									icon:'success',
									success:function(){
										that.page=1;
										that.orderList=[]
										that.getOrders()
									}
								});
								uni.hideLoading();
							},function(){},false)
						} 
					}
				});
			},
			//切换订单状态
			updateStatus(status){
				var that=this;
				that.order_status=status;
				that.page=1;
				that.orderList=[]
				that.getOrders()
			},
			//
			getOrders(){
				uni.showLoading({
					mask:true,
					title: '加载中'
				});
				var that=this;
				var params={
					orderStatus:that.order_status,
					page:that.page,
					rows:that.rows
				}
				util.fetchPost('/order/list',params,function(res){
					let  oldList=that.orderList;
					let newList=res.data;
					if(newList && newList.length>0){
						for(let i in newList){
							var nord=newList[i];
							nord.tripBeginDate=util.formatDate(new Date(nord.tripBeginDate),"yyyy-MM-dd");
							nord.tripEndDate=util.formatDate(new Date(nord.tripEndDate),"yyyy-MM-dd");
							
							oldList.push(nord)
						}
						if(newList.length<that.rows){
							that.canNextPage=false;
						}else{
							that.canNextPage=true;
						}
					}else{
						that.canNextPage=false;
					}
					
					that.orderList=oldList
					uni.hideLoading();
				},function(){},true)
			},
			toDetail (id) {
				uni.navigateTo({url: '/pages/order/orderDetail/orderDetail?orderId='+id})
			},
			toNewPage(url){
				uni.navigateTo({url})
			}
			
		}
	}
</script>

<style>
	.myOrder_box{
		height: 100%;
	}
	.myOrder_box .order_type>view{
		flex: 1;
		font-size: 28upx;
		color: #999999;
		text-align: center;
		line-height: 100upx;
	}
	.myOrder_box .order_type>view.cur{
		color: #FFC800;
		font-size: 32upx;
		font-weight: 600;
		position: relative;
	}
	.myOrder_box .order_type>view.cur::after{
		content: '';
		position: absolute;
		bottom: 10upx;
		background: #FFC800;
		width: 60upx;
		height: 5upx;
		left: 50%;
		margin-left: -30upx;
	}
	.order_item{
		height: calc(100% - 100upx);
	}
	scroll-view{
		height: 100%;
	}
	.order_item .item_box{
		padding: 0 24upx 24upx;
	}
	.order_item .item{
		margin-top: 24upx;
		box-shadow: 0 0 18upx 0 rgba(106, 79, 13, 0.12);
		padding: 24upx;
		border-radius: 10upx;
	}
	.order_item .item .state_box .num{
		font-size: 32upx;
		color: #333333;
		font-weight: 600;
	}
	.order_item .item .state_box .state{
		font-size: 28upx;
		color: #FC5C1D;
	}
	.order_item .item .state_box .state.state2{
		color: #FFC800;
	}
	.order_item .item .state_box .state.state3{
		color: #333333;
	}
	.order_item .item .state_box .state.state4{
		color: #999999;
	}
	.order_item .item .state_box .state.state5{
		color: #FC5C1D;
	}
	.order_item .item .info{
		font-size: 28upx;
		color: #757575;
		margin: 20upx 0 ;
	}
	.order_item .item .price{
		font-size: 36upx;
		color: #FFC800;
	}
	.order_item .item .addit_l text{
		font-size: 24upx;
		color: #999999;
	}
	.order_item .item .addit_r navigator{
		display: inline-block;
		vertical-align: middle;
		width: 160upx;
		height: 60upx;
		line-height: 60upx;
		border: 1px solid #FFC800;
		color: #FFC800;
		font-size: 30upx;
		border-radius: 30upx;
		text-align: center;
		margin-left: 30upx;
	}
	.order_item .item .addit_r navigator.cur{
		background: #FFC800;
		color: #fff;
	}
</style>
